<template>
  <div class="carousel-box">
    <!-- <div @click="move(-1)" class="btn btn-left" @mouseenter="carouselPause" @mouseleave="carouselPlay"></div> -->
    <ul
      @mouseenter="carouselPause"
      @mouseleave="carouselPlay"
      class="carousel"
      :class="{transition:animate}"
      :style="moveStyle"
    >
      <li class="carousel-item" v-for="(item,index) of pic" :key="index">
        <div class="img_father">
          <img :src="item.img" alt />
          <img :src="item.img" alt />
          <img :src="item.img" alt />
        </div>
      </li>

      <li class="carousel-item">
        <div class="img_father">
          <img :src="pic[0].img" alt />
          <img :src="pic[0].img" alt />
          <img :src="pic[0].img" alt />
        </div>
      </li>
    </ul>
    <ul class="dots">
      <li @click="chosen(index)" v-for="(item,index) of pic" :key="index">
        <img v-if="i==index" src="../assets/image/patten_hui.png" alt />
        <img v-else src="../assets/image/patten_tou.png" alt />
      </li>
    </ul>
    <!-- <div @click="move(1)" class="btn btn-right" @mouseenter="carouselPause" @mouseleave="carouselPlay"></div> -->
  </div>
</template>
<script>
export default {
  name: "zhr-carousel",
  data() {
    return {
      pic: [
        {
          name: "空中花园",
          img: require("../assets/image/right1.png"),
          an: require("../assets/image/patten_hui.png")
        },
        {
          name: "空中花园",
          img: require("../assets/image/xiazaizhongxin/shiping.png"),
          an: require("../assets/image/patten_hui.png")
        },
        {
          name: "空中花园",
          img: require("../assets/image/xiazaizhongxin/shiping.png"),
          an: require("../assets/image/patten_hui.png")
        },
        {
          name: "空中花园",
          img: require("../assets/image/xiazaizhongxin/shiping.png"),
          an: require("../assets/image/patten_hui.png")
        }
      ],
      i: 0,
      moveStyle: {
        transform: ""
      },
      animate: false,
      duration: 1500,
      imgCount: 4,
      canClick: true,
      timer: "",
      autoPlayTime: 9000
    };
  },
  mounted() {
    this.carouselPlay();
  },
  destroyed() {
    this.carouselPause();
  },
  methods: {
    moveTo(to) {
      if (to == undefined) {
        to = this.i + 1;
      }
      if (this.i == 0) {
        if (to > this.i) {
          this.animate = true;
        } else {
          this.animate = false;
          this.moveStyle.transform = `translateX(-${this.imgCount * 100}%)`;
          // let timer1 = setTimeout(() => {
          this.moveTo(this.imgCount - 1);
          //   clearTimeout(timer1);
          // }, 100);
          return;
        }
      }
      this.i = to;
      this.moveStyle.transform = `translateX(-${this.i * 100}%)`;
      if (this.i == this.imgCount) {
        this.i = 0;
        let timer2 = setTimeout(() => {
          this.animate = false;
          this.moveStyle.transform = "translateX(0%)";
          clearTimeout(timer2);
        }, this.duration);
      }
    },
    move(n) {
      if (this.canClick) {
        this.moveTo(this.i + n);
        // this.canClick = false;
        // let timer3 = setTimeout(() => {
        this.canClick = true;
        //   clearTimeout(timer3);
        // }, this.duration + 100);
      }
    },
    carouselPlay() {
      // this.timer = setInterval(() => {
      //   this.moveTo();
      // }, this.autoPlayTime);
    },
    carouselPause() {
      // clearInterval(this.timer);
    },
    chosen(index) {
      this.moveTo(index);
      // let timer = setTimeout(function() {
      this.canClick = true;
      //   clearTimeout(timer);
      // }, this.duration);
    }
  }
};
</script>
<style scoped>
.carousel-box {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel {
  height: 100%;
}
.carousel,
.dots {
  display: flex;
  padding: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel-item .img_father {
  width: 100vw;
  height: 100%;

  display: flex;
}
.transition {
  transition: all 0.5s linear;
}

.dots > li {
  width: 60px;
  height: 40px;
  box-sizing: border-box;
  cursor: pointer;
}
.carousel-box .dots {
  position: absolute;
  width: 200px;
  bottom: 40px;
  left: 50%;

  margin-left: -100px;
}
.carousel-box .active {
  background: #b7b7b7;
}
.carousel-box .btn {
  position: absolute;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin-top: -20px;
  z-index: 80;
  transform-origin: center center;
}
.carousel-box .btn:hover {
  transform: scale(1.2);
}
.carousel-box .btn-left {
  left: 10px;
  /* background-image: url(../assets/images/left.png); */
}
.carousel-box .btn-right {
  right: 10px;
  /* background-image: url(../assets/images/right.png); */
}
.bg_img_1,
.bg_img_2,
.bg_img_3 {
  /* background-position: center; */

  width: 33.3vw;
  height: 100%;
  background-size: cover;
}
.bg_img_1 {
  background-image: url("../assets/image/right1.png");
}
.bg_img_2 {
  background-image: url("../assets/image/right2.png");
}
.bg_img_3 {
  background-image: url("../assets/image/right3.png");
}
.bg_img_4,
.bg_img_5 {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.bg_img_4 {
  background-image: url("../assets/image/bj2.png");
}
.bg_img_5 {
  background-image: url("../assets/image/bj1.png");
}
</style>